{% extends "base.html" %}

{%block head %}
<link href="/media/css/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="/media/js/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/galleria/jquery.galleria.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.gallery_unstyled').addClass('gallery'); // adds new class name to maintain degradability
	$('.nav').css('display','none'); // hides the nav initially
	$('ul.gallery').galleria({
		history   : true, // deactivates the history object for bookmarking, back-button etc.
		clickNext : true, // helper for making the image clickable. Let's not have that in this example.
		insert    : '#main_image', // the containing selector for our main image. 
							   // If not found or undefined (like here), galleria will create a container 
							   // before the ul with the class .galleria_container (see CSS)
		onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

						// fade in the image & caption
			if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
				image.css('display','none').fadeIn(1000);
			}
			caption.css('display','none').fadeIn(1000);
			
			// fetch the thumbnail container
			var _li = thumb.parents('li');
			
			// fade out inactive thumbnail
			_li.siblings().children('img.selected').fadeTo(500,0.3);
			
			// fade in active thumbnail
			thumb.fadeTo('fast',1).addClass('selected');
			// add a title for the clickable image
			caption.html(
					'<a href = "{{albums.url}}'+thumb.attr('id')+'">'+
					thumb.attr('alt')+
					'</a>'
					);
			
		},
		onThumb : function(thumb) { // thumbnail effects goes here

						// fetch the thumbnail container
						var _li = thumb.parents('li');

						// if thumbnail is active, fade all the way.
						var _fadeTo = _li.is('.active') ? '1' : '0.3';

						// fade in the thumbnail when finnished loading
						thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

						// hover effects
						// hover effects
						thumb.hover(
							function() {$.galleria.activate(thumb.attr('src'));},
							function() { thumb.fadeTo('fast',1); },
							function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
							
							)
						thumb.click(
							function() {
								window.location.href = "{{albums.url}}"+thumb.attr('id')
							}
						)
				
					}
		
		
	});
	var firstItem = $('ul.galleria li:first').addClass('active').find('img').addClass('selected'); $.galleria.activate(firstItem.attr('src')); 
});

</script>

<style media="screen,projection" type="text/css">

/* BEGIN DEMO STYLE */
	a{color:#348;text-decoration:none;outline:none;}
	a:hover{color:#67a;}
	.caption{font-style:italic;color:#887;}
	.django_galleria{position:relative;padding-bottom:2em;padding-top:9px;}
	.gallery{width:702px;margin:0 auto;}
	.gallery li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
	.gallery li div{left:240px}
	.gallery li div .caption{font:italic 0.7em/1.4 georgia,serif;}
	.galleria_wrapper { background:#fff;}
	#main_image{margin:0 auto 60px auto; height:450px;width:800px;background:white;}
	#main_image img{margin-bottom:10px;}
	
	.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	
	.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
	.info p{margin-top:1.6em;}


</style>
{% endblock %}

{% block content %}
<div id="content" class="span-20">

<div class="django_galleria">
	<center>
	<ul class="gallery_unstyled">
{% for album in albums %}
		<li><img src = "{{album.thumb.url}}" alt="{{album.name}}" title="{{album.caption}}" id="{{album.id}}"></li>
		
{% endfor %}
</ul>
</center>
</div>


	<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p>
	</div>
</div>
{% endblock %}
